<template>
  <div>
    <el-dialog
      :visible.sync="showDialog"
      @closed="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="编辑设备状态"
      :close-on-click-modal="false"
    >
      <el-tabs :tab-position="tabPosition" class="tabHight">
        <el-tab-pane label="详情">
          <el-form
            :model="editData"
            :rules="rules"
            ref="editData"
            size="mini"
            class="tabHight_auto"
            label-width="70px"
          >
            <el-form-item label="Token" prop="token">
              <el-input
                v-model="editData.token"
                placeholder="请输入Token"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input
                v-model="editData.name"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态码" prop="code">
              <el-input
                v-model="editData.code"
                placeholder="请输入状态码"
                :disabled="true"
              ></el-input>
            </el-form-item>

            <el-form-item label="颜色">
              <div class="content-picker">
                <el-color-picker
                  popper-class="custom-color-picker"
                  :predefine="predefineColors"
                  v-model="editData.backgroundColor"
                >
                </el-color-picker>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="元数据">
          <!-- <MetaData ref="upoadMetaData" :editmetaData="editmetaData" :isedit="isedit" @sendmetaDatas="sendmetaData" /> -->
          <el-form label-width="40px" :model="formInline" size="mini">
            <el-row>
              <el-col :span="9">
                <el-form-item label="键:">
                  <el-input placeholder="请输入键" v-model="formInline.date">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item label="值:">
                  <el-input placeholder="请输入值" v-model="formInline.name">
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="metaDataSubmit"
                    style="background: #2680d2"
                    >添加</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-table
            :data="metaData"
            height="270"
            style="width: 100%"
            :header-cell-style="{ background: '#ffffff', color: '#333333' }"
          >
            <el-table-column prop="key" label="键"> </el-table-column>
            <el-table-column prop="value" label="值"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, metaData)"
                  type="text"
                  icon="el-icon-delete"
                  style="color: #ff4d4f"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- -------------------------------------------------------------------- -->
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="submitForm('editData')"
          v-permission="[21, 'button']"
          :loading="btnLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import MetaData from "../../opensite/metaData.vue";
import { TOKEN_RULES } from "@/utils/local";
import { editDeviceState } from "@/api/deviceType";
import { PREDEFINE_COLORS } from "@/utils/local";
export default {
  components: {
    // MetaData
  },
  props: {
    deviceTypeToken: {
      type: String,
      default: "",
    },
    EditShow: {
      type: Boolean,
      default: false,
    },
    editStatus: {
      type: Object,
      default: false,
    },
  },
  data() {
    return {
      btnLoading: false,
      predefineColors: PREDEFINE_COLORS,
      formInline: { date: "", name: "" },
      metaData: [],
      metaDataJson: {},
      tabPosition: "left",
      showDialog: false,
      // deviceTypeToken: this.$route.query.deviceTypeToken,
      editData: {},
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        token: TOKEN_RULES,
      },
      isedit: true,
    };
  },
  watch: {
    EditShow(newVal, oldVal) {
      this.showDialog = newVal;
    },
    editStatus: {
      handler(newVal, oldVal) {
        this.editData = JSON.parse(JSON.stringify(newVal));
        let arr = [];
        let keyArr = Object.keys(newVal.metadata);
        keyArr.forEach((item) => {
          newVal.metadata[item];
          arr.push({
            key: item,
            value: newVal.metadata[item],
          });
        });
        this.metaData = arr;
      },
    },
  },
  mounted() {},
  methods: {
    // 添加元数据
    metaDataSubmit() {
      if (this.formInline.date == "" || this.formInline.name == "") {
        return false;
      }
      this.metaData.unshift({
        key: this.formInline.date,
        value: this.formInline.name,
      });
      this.formInline = { date: "", name: "" };
    },
    deleteRow(index, rows) {
      var id = rows[index].key;
      for (var n in this.metaDataJson) {
        if (id === n) {
          delete this.metaDataJson[n];
        }
      }
      rows.splice(index, 1);
    },

    // 关闭
    handleClose() {
      this.$emit("changeShow", "false");
      this.cancel();
    },
    // 取消
    cancel() {
      this.showDialog = false;
      this.formInline = { date: "", name: "" };
      // this.metaData = this.editData.metadata
      // this.$refs.upoadMetaData.clearMeteDada()
    },
    // 提交
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          // 元数据格式转换
          this.metaData.forEach((item) => {
            this.metaDataJson[item.key] = item.value;
          });
          let formData = this.editData;
          formData.metadata = this.metaDataJson;
          this.btnLoading = true;
          editDeviceState(formData, this.deviceTypeToken, this.editData.token)
            .then((res) => {
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.$emit("getDeviceStatusList");
              this.showDialog = false;
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
  },
};
</script>

<style>
</style>